<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-size: 14px;
      display: none;
    }
    .success-tips {
      color: aquamarine;
    }
    .error-tips {
      color: red;
    }
  </style>
</head>
<body>
  <form>
    <label>
      密码：
      <input type="password">
      <div class="success-tips">密码符合规则</div>
      <div class="error-tips">密码必须包含大小写和数字且要8~16位</div>
    </label>
  </form>
</body>
</html>

<script>
// 07-案例：输入密码，点击确定，验证是否是强密码
// /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/

const domErr = document.querySelector('.error-tips');
const domSuccess = document.querySelector('.success-tips');

const regForStrongerPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;

document.querySelector('input')
  .addEventListener('input', e => {

    // if (regForStrongerPassword.test(e.target.value)) {
    //   // 表示 密码为 强密码，显示 success 的 dom
    //   domSuccess.style.display = 'block';
    //   domErr.style.display = 'none';
    // } else {
    //   // 表示密码为 弱密码，显示 error 的 dom
    //   domSuccess.style.display = 'none';
    //   domErr.style.display = 'block';
    // }

    // 用三目运算符改写上面
    const isStrongerPassword = regForStrongerPassword.test(e.target.value);
    domSuccess.style.display = isStrongerPassword ? 'block' : 'none';
    domErr.style.display = isStrongerPassword ? 'none' : 'block';;
  });
</script>